<template>
	<div class="todoList">
		<todo-item 
		v-for="item of todoList"
		:key="item.id"
		:item = "item"
		@removeTodo = "removeTodo"
		@setStatus = "setStatus"
		@setDoing = "setDoing"
		></todo-item>
	</div>
</template>

<script lang="ts">
	import TodoItem from './TodoItem.vue'
	import {ITodo} from '@/typings'
	import {defineComponent,PropType,watch,ref} from 'vue'
	import {IUseTodo,useTodo} from '@/hooks'
	import {TODO_STATUS} from '@/typings';
	
	export default defineComponent({
		name:'TodoList',
		props:{
			todoList:Array as PropType<ITodo[]>,
		},
		components:{
			TodoItem,
		},
		setup(props,ctx){
			
			const {
				removeTodo,
				setStatus,
				setDoing
			}:IUseTodo = useTodo();
			// watch(()=>todoList,(todoList)=>{
			// 	listShow = todoList.filter((item)=>item.status == filterValue)
			// })
			return{
				removeTodo,
				setStatus,
				setDoing,
			}
		}
	})
</script>

<style>
</style>
